<template>
  <div>
    <!-- 偏好词设置 -->
    <el-card class="preference_card" style="height: calc(100vh - 7rem)">
      <template #header>
        <div class="w-full flex justify-end items-center">
          <el-button type="primary" icon="Plus" @click="openDrawer({ id: 0 })"
            >新增</el-button
          >
        </div>
      </template>

      <el-table :data="tableData" style="height: calc(100vh - 13rem)">
        <el-table-column label="类型" prop="typeName" />
        <el-table-column label="描述" prop="word" />
        <el-table-column label="操作" prop="word">
          <template #default="{ row }">
            <el-button type="primary" link @click="openDrawer(row)">
              <el-icon><Edit /></el-icon> 编辑
            </el-button>
            <el-button type="danger" link @click="handleDelete(row.id)">
              <el-icon><Delete /></el-icon> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <PagingQuery
        :page="page"
        :size="size"
        :total="total"
        @getList="getList"
        class="mt-1"
      />
    </el-card>

    <el-drawer
      v-model="drawer"
      destroy-on-close
      :title="detailForm.id == 0 ? '新增偏好词' : '编辑偏好词'"
      size="40%"
    >
      <template #header>
        <div>
          {{ detailForm.id == 0 ? "新增偏好词" : "编辑偏好词" }}
          <el-text class="ml-2" type="warning"
            >(品牌信息不能作为ai偏好词)</el-text
          >
        </div>
      </template>
      <InsertUpdatePreferce :detailForm="detailForm" @handleBack="handleBack" />
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import PagingQuery from "@/components/PagingQuery.vue";
import InsertUpdatePreferce from "./component/InsertUpdatePreferce.vue";
import { handleApiResponse } from "@/utils/request.js";
import {
  GetPreferenceInfoList,
  DeletePreferenceInfo,
} from "../../../../../wailsjs/go/api/CustomerApi";

onMounted(() => {
  getList();
});

const tableData = ref([]);
const page = ref(1);
const size = ref(10);
const total = ref(0);
async function getList(e) {
  if (e) {
    page.value = e.page;
    size.value = e.size;
  }
  handleApiResponse(() =>
    GetPreferenceInfoList({ page: page.value, size: size.value })
  ).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data.list || [];
      total.value = res.data.total || 0;
    }
  });
}

// 1.新增或者编辑
const drawer = ref(false);
const detailForm = ref({});
const openDrawer = (row) => {
  detailForm.value = row;
  drawer.value = true;
};
const handleBack = (val) => {
  if (val == 1) {
    getList();
  }
  drawer.value = false;
};

// 2.删除
const handleDelete = (id) => {
  ElMessageBox.confirm("你确定删除这条数据吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    handleApiResponse(() => DeletePreferenceInfo({ id: id })).then((res) => {
      if (res.code == 0) {
        ElMessage.success("删除成功");
        getList();
      }
    });
  });
};
</script>

<style scoped lang="scss">
.preference_card {
  :deep(.el-card__header) {
    @apply px-2 py-1;
  }
}
</style>